<template>
  <div>
    <el-table :data="shopList" stripe height="400" highlight-current-row border>
      <el-table-column prop="title" label="闲置商品标题"></el-table-column>
      <el-table-column prop="state" label="商品状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state | stateFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="updateState(scope.row.id,scope.row.state)"
          >{{ scope.row.state===0 ? '下架':'上架' }}</el-button>
          <el-button size="mini" @click="lookItem(scope.row.id)">详情</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="itemsPerPage"
      :page-sizes="[5,10,20]"
      :current-page="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <!-- 查看详情 -->
    <el-dialog :visible.sync="dialogVisibleLook" title="商品详情">
      <!-- //标题、转卖价、原价、成色、所在地、发布人、联系方式、图片展示、宝贝介绍 -->
      <el-form :model="lookForm" :inline="false" ref="lookForm" class="demo-ruleForm">
        <el-form-item label="标题:" prop="title">
          <span>{{ lookForm.title }}</span>
          <!-- <el-input v-model="lookForm.title" :disabled="true"></el-input> -->
        </el-form-item>
        <br />
        <el-form-item label="转卖价:" prop="price">
          <span>{{ lookForm.price }}</span>
          <!-- <el-input v-model="lookForm.price" :disabled="true"></el-input> -->
        </el-form-item>
        <br />
        <el-form-item label="原价:" prop="oprice">
          <span>{{ lookForm.oprice }}</span>
          <!-- <el-input v-model="lookForm.oprice" :disabled="true"></el-input> -->
        </el-form-item>
        <br />
        <el-form-item label="成色:" prop="isNew">
          <span>{{ lookForm.isNew === 1 ?'全新':'非全新' }}</span>
          <!-- <el-input v-model="lookForm.isNew" :disabled="true"></el-input> -->
        </el-form-item>
        <br />
        <el-form-item label="所在地:" prop="address">
          <span>{{ lookForm.address }}</span>
          <!-- <el-input v-model="lookForm.address" :disabled="true"></el-input> -->
        </el-form-item>
        <br />
        <el-form-item label="发布人:" prop="name">
          <span>{{ lookForm.name }}</span>
          <!-- <el-input v-model="lookForm.name" :disabled="true"></el-input> -->
        </el-form-item>
        <br />
        <el-form-item label="联系方式" prop="phone">
          <span>{{ lookForm.phone }}</span>
          <!-- <el-input v-model="lookForm.phone" :disabled="true"></el-input> -->
        </el-form-item>
        <el-form-item label="宝贝介绍" prop="description">
          <span>{{ lookForm.title }}</span>
          <!-- <el-input v-model="lookForm.description" :disabled="true"></el-input> -->
        </el-form-item>
        <el-form-item label="图片展示" prop="pics">
          <el-carousel height="150px">
            <el-carousel-item v-for="(item,index) in picsNew" :key="index">
              <el-image class="imgSize" :src="item">{{item}}</el-image>
            </el-carousel-item>
          </el-carousel>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import shopApi from "@/api/shop";
export default {
  data() {
    return {
      total: 0,
      itemsPerPage: 5,
      page: 1,
      shopList: [],
      dialogVisibleLook: false,
      //标题、转卖价、原价、成色、所在地、发布人、联系方式、图片展示、宝贝介绍
      lookForm: {
        title: "",
        price: "",
        oprice: "",
        isNew: 1,
        address: "",
        name: "",
        phone: "",
        description: "",
        pics: { id: "", path: "" }
      },
      picsNew: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    //查询
    fetchData() {
      shopApi.searchShop(this.page, this.itemsPerPage).then(response => {
        const resp = response.data;
        //console.log('fetchData',response);
        if (resp.flag) {
          this.total = resp.total;
          this.shopList = resp.data;
          console.log(this.shopList);
          this.$message({
            message: resp.msg,
            type: "success"
          });
        } else {
          this.$message({
            message: resp.msg,
            type: "warning"
          });
        }
      });
    },
    handleSizeChange(val) {
      //切换当前页
      this.itemsPerPage = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      //切换每页显示条数
      this.page = val;
      this.fetchData();
    },
    //修改状态
    updateState(id, state) {
      const map = {
        id: id,
        state: "0"
      };
      if (state === 0) {
        map.state = 1;
      }
      shopApi.updateState(map).then(response => {
        const resp = response.data;
        this.$message({
          message: resp.msg,
          type: "success"
        });
        this.fetchData();
      });
    },
    //删除
    handleDelete(id) {
      this.$confirm("确认删除这条记录吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消"
      }).then(() => {
        shopApi.deleteShop(id).then(response => {
          const resp = response.data;
          if (resp.flag) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.fetchData();
          } else {
            this.$message({
              message: resp.msg,
              type: "error"
            });
          }
        });
      });
    },
    //查看详情
    lookItem(id) {
      this.picsNew = [];
      this.dialogVisibleLook = true;
      this.$nextTick(() => {
        this.$refs["lookForm"].resetFields();
      });
      shopApi.findShopById(id).then(response => {
        const resp = response.data;
        if (resp.flag) {
          this.lookForm = resp.data;
          console.log();
          resp.data.pics.forEach(item => {
            this.picsNew.push(item.path);
          });
          this.$message({
            message: resp.msg,
            type: "success"
          });
        } else {
          this.$message({
            message: resp.msg,
            type: "error"
          });
        }
      });
    }
  },
  filters: {
    stateFilter(value) {
      return value === 0 ? "上架" : "下架";
    }
  }
};
</script>

<style scoped>
.imgSize {
  width: 200px;
  height: 200px;
}
</style>